<template>
  <div>
    <!-- 头部分类区域 -->
    <header id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item', v.id === 0 ? 'mui-active' : '']"
            href="#item1mobile"
            data-wid="tab-top-subpage-1.html"
            v-for="v in imgCategoryList"
            :key="v.id"
            @click="getImgList(v.id)"
          >
            {{ v.title }}
          </a>
        </div>
      </div>
    </header>

    <!-- 图片列表区域 利用mint-ui实现图片的懒加载-->
    <ul class="imgUl">
      <router-link
        tag="li"
        v-for="v in imgList"
        :key="v.id"
        :to="`/home/photoinfo/${v.id}`"
      >
        <img src="../../images/leimu08.jpeg" />
        <div class="img-info">
          <p class="info-title">{{ v.title }}</p>
          <p class="info-dec" v-html="v.zhaiyao"></p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
// 一、导入MUI
import mui from "../../../lib/js/mui.js"
export default {
  mounted() {
    // 1.1 初始化scroll插件
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    })
  },
  data() {
    return {
      // 图片分类列表
      imgCategoryList: [],
      // 图片列表
      imgList: [],
    }
  },

  methods: {
    // 二、请求图片分类数据方法
    async getImgCategory() {
      // 2.1 发送请求
      const { data } = await this.$http.get(`/api/getimgcategory`)
      if (data.status === 0) {
        // 2.2 请求成功后需要手动添加一个全部的分类
        data.message.unshift({ title: `全部`, id: 0 })
        // 2.3 将数据进行赋值操作
        this.imgCategoryList = data.message
      }
    },

    // 三、请求所有的图片列表方法
    async getImgList(id) {
      const { data } = await this.$http.get(`/api/getimages/${id}`)
      if (data.status === 0) {
        // console.log(data)
        this.imgList = data.message
      }
    },
  },

  // 生命周期函数: 进入页面后 created 方法会被调用,此时 data 数据和 methods 方法已经加载完毕
  created() {
    // (1)调用请求图片分类数据的方法
    this.getImgCategory()
    // (2)调用请求所有的图片列表方法,默认请求所有的数据
    this.getImgList(0)
  },
}
</script>

<style lang="scss" scoped>
.mui-slider {
  // 启用单指水平平移手势
  touch-action: pan-x;
}
.imgUl {
  margin: 0;
  padding: 10px;
  background-color: rgba(0, 0, 255, 0.3);
  li {
    position: relative;
    list-style: none;
    & + li {
      margin-top: 10px;
    }
  }
  img {
    width: 100%;
    vertical-align: middle;
    margin: auto;
  }
  .img-info {
    position: absolute;
    bottom: 0;
    max-height: 86px;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    .info-title {
      font-size: 14px;
      color: white;
      text-align: center;
      margin-bottom: 3px;
    }
    .info-dec {
      font-size: 13px;
      color: white;
      text-indent: 2em;
    }
  }
}
</style>
